// All these CSS classes will not be generated if the $use-layout-classes is set to false.
@if $use-layout-classes {
  #{$css-scope} {
    // Layout classes.
    // ----------------------------------------------
    .show {display: block;}
    .hide {display: none;}
    .spacer {flex-grow: 1;}

    .grow {flex-grow: 1;flex-basis: auto;}
    .no-grow {flex-grow: 0;}
    .shrink {flex-shrink: 1;}
    .no-shrink {flex-shrink: 0;}
    .fill-width {width: 100%;}
    .fill-height {height: 100%;}
    .basis-zero {flex-basis: 0;}

    .align-start {align-items: flex-start;}
    .align-center {align-items: center;}
    .align-end {align-items: flex-end;}
    .align-self-start {align-self: flex-start;}
    .align-self-center {align-self: center;}
    .align-self-end {align-self: flex-end;}
    .align-self-stretch {align-self: stretch;}
    .justify-start {justify-content: flex-start;}
    .justify-center {justify-content: center;}
    .justify-end {justify-content: flex-end;}
    // There is no justify-self in Flexbox.
    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
    .justify-space-between {justify-content: space-between;}
    .justify-space-around {justify-content: space-around;}
    .justify-space-evenly {justify-content: space-evenly;}

    .text-left {text-align: left;}
    .text-center {text-align: center;}
    .text-right {text-align: right;}
    .text-nowrap {white-space: nowrap;}

    .lh0 {line-height: 1;}
    .lh1 {line-height: 1.2;}
    .lh2 {line-height: 1.4;}
    .lh3 {line-height: 1.6;}
    .lh4 {line-height: 1.8;}
    .lh5 {line-height: 2;}

    .d-flex {display: flex;}
    .d-iflex {display: inline-flex;}
    .d-block {display: block;}
    .d-iblock {display: inline-block;}
    // ----------------------------------------------

    // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
    // ----------------------------------------------
    @for $i from 1 through 6 {
      .bd#{$i} {border: $i + px solid $border-color;}
    }
    .bdx1 {border-left: 1px solid $border-color;border-right: 1px solid $border-color;}
    .bdy1 {border-top: 1px solid $border-color;border-bottom: 1px solid $border-color;}
    .bdl1 {border-left: 1px solid $border-color;}
    .bdr1 {border-right: 1px solid $border-color;}
    .bdt1 {border-top: 1px solid $border-color;}
    .bdb1 {border-bottom: 1px solid $border-color;}
    .bd0 {border: none;}

    @for $i from 1 through 6 {
      .bdrs#{$i} {border-radius: round($i * $base-increment);}
    }
    .bdrsr {border-radius: 999em;}
    .bdrsm {border-radius: 100%;}
    .bdrs0 {border-radius: 0;}
    // ----------------------------------------------

    // Shadows (from -6 to 6).
    // ----------------------------------------------
    @for $i from -6 through -1 {
      .sh#{$i} {
        box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
      }
    }
    @for $i from 1 through 6 {
      .sh#{$i} {
        box-shadow: 0 0 1px rgba(#000, 0.1),
                    round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
      }
    }
    .sh0 {box-shadow: none;}
    // ----------------------------------------------

    // Spaces.
    // ----------------------------------------------
    // Margin.
    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .ma#{$i} {margin: $number;}
      @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
    }
    .maa {margin: auto;}
    .ma0 {margin: 0;}

    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .mx#{$i} {margin-left: $number;margin-right: $number;}
      .my#{$i} {margin-top: $number;margin-bottom: $number;}
      @if ($i > 0) {
        .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
        .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
      }
    }
    .mxa {margin-left: auto;margin-right: auto;}
    .mya {margin-top: auto;margin-bottom: auto;}
    .mx0 {margin-left: 0;margin-right: 0;}
    .my0 {margin-top: 0;margin-bottom: 0;}

    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .mt#{$i} {margin-top: $number;}
      .mr#{$i} {margin-right: $number;}
      .mb#{$i} {margin-bottom: $number;}
      .ml#{$i} {margin-left: $number;}
      @if ($i > 0) {
        .mt-#{$i} {margin-top: -$number;}
        .mr-#{$i} {margin-right: -$number;}
        .mb-#{$i} {margin-bottom: -$number;}
        .ml-#{$i} {margin-left: -$number;}
      }
    }
    .mta {margin-top: auto;}
    .mra {margin-right: auto;}
    .mba {margin-bottom: auto;}
    .mla {margin-left: auto;}
    .mt0 {margin-top: 0;}
    .mr0 {margin-right: 0;}
    .mb0 {margin-bottom: 0;}
    .ml0 {margin-left: 0;}

    // Padding.
    @for $i from 1 through 12 {
      $number: round($i * $base-increment);
      .pa#{$i} {padding: $number;}
    }
    .pa0 {padding: 0;}

    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .px#{$i} {padding-left: $number;padding-right: $number;}
      .py#{$i} {padding-top: $number;padding-bottom: $number;}
    }
    .px0 {padding-left: 0;padding-right: 0;}
    .py0 {padding-top: 0;padding-bottom: 0;}

    @for $i from 0 through 12 {
      $number: round($i * $base-increment);
      .pt#{$i} {padding-top: $number;}
      .pr#{$i} {padding-right: $number;}
      .pb#{$i} {padding-bottom: $number;}
      .pl#{$i} {padding-left: $number;}
    }
    .pt0 {padding-top: 0;}
    .pr0 {padding-right: 0;}
    .pb0 {padding-bottom: 0;}
    .pl0 {padding-left: 0;}
    // ----------------------------------------------

    // Sizes.
    // ----------------------------------------------
    // In all the sizes below, round(x / 2) * 2 to always have even numbers.
    // Different heights with a mix of odd and even numbers will misalign
    // when vertically centering (vertical-align or align-items center).
    .size--xs {font-size: round(0.85 * $base-font-size);}
    .size--sm {font-size: round(1 * $base-font-size);}
    .size--md {font-size: round(1.1 * $base-font-size);}
    .size--lg {font-size: round(1.4 * $base-font-size);}
    .size--xl {font-size: round(1.65 * $base-font-size);}
    // ----------------------------------------------

    // Grid system.
    // ----------------------------------------------
    // CSS variables are not supported in media queries yet
    // (https://www.w3.org/TR/css-variables-1/#using-variables),
    // the grid system is done dynamically in dynamic-css.js.

    // @media screen and (min-width: var(--w-breakpoint-xs)) {
    //   @for $i from 0 through $grid-base {
    //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }

    // @media screen and (min-width: var(--w-breakpoint-sm)) {
    //   @for $i from 0 through $grid-base {
    //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }

    // @media screen and (min-width: var(--w-breakpoint-md)) {
    //   @for $i from 0 through $grid-base {
    //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }

    // @media screen and (min-width: var(--w-breakpoint-lg)) {
    //   @for $i from 0 through $grid-base {
    //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }
    // ----------------------------------------------
  }
}

@for $i from 1 through 12 {
  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: round($base-increment * $i);}
}
.w-flex.gap0, .w-grid.gap0 {gap: 0;}
